<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>地图特效</title>
		<style>
			@keyframes bianhua {
				0% {}
				70% {
					transform: scale(4);
					opacity: 1;
				}
				100%{
					transform: scale(8);
					opacity: 0;
				}
			}
			
			/*@keyframes bianhua2 {
				0% {}
				
				100% {
					transform: scale(4);
					opacity: 0;
				}
			}*/
			
			.bi {
				position: relative;
				margin: 100px auto;
				width: 500px;
				height: 250px;
				border: 1px solid #000;
				/*background-image: url(../img/ali.jpg);*/
				background-size: 100%;
			}
			
			.dingwei {
				position: relative;
				margin: 160px auto;
				width: 50px;
				height: 50px;
			}
			
			.x1,
			.x2,
			.x3 {
				position: absolute;
				width: 8px;
				height: 8px;
				left: 50%;
				top: 50%;
				margin-left: -5px;
				margin-top: -5px;
			}
			
			.x1 {
				width: 10px;
				height: 10px;
				background: rgb(2, 153, 254);
				border-radius: 50%;
			}
			
			.x2,
			.x3 {
				transition: all 1s;
				box-shadow: 0px 0px 2px #002796;
				border-radius: 50%;			
			}
			
			.x2 {
				animation: bianhua 1s linear infinite ;
				animation-delay: .5s;					/*给其中一个首先加一个延时函数*/
			}
			
			.x3 {
				animation: bianhua 1s linear infinite;
			}
		</style>
	</head>

	<body>
		<div class="bi">
			<div class="dingwei">
				<div class="x1"></div>
				<div class="x2"></div>
				<div class="x3"></div>
			</div>
		</div>
	</body>

</html>